<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iframe Navigation Example</title>
<style>
    .wrap {
        display: flex;
    }
    .aside-wrap {
        flex: 1;
        background-color: #f4f4f4;
    }
    .nab-list {
        list-style: none;
        padding: 0;
    }
    .nav-item {
        margin-bottom: 5px;
    }
    .nav-lk {
        display: block;
        padding: 10px;
        background-color: #ddd;
        color: black;
        text-decoration: none;
    }
    .nav-lk:hover {
        background-color: #ccc;
    }
    .frame-wrap {
        flex: 4;
    }
    iframe {
        width: 100%;
        height: 600px; /* You can adjust the height as needed */
        border: none;
    }
</style>
</head>
<body>
<div class="wrap">
    <aside class="aside-wrap">
        <ul class="nab-list">
            <li class="nav-item">
                <a href="https://www.taobao.com" target="navIframe" class="nav-lk">淘宝商城</a>
            </li>
            <li class="nav-item">
                <a href="https://www.tmall.com"  target="navIframe" class="nav-lk">天猫商城</a>
            </li>
            <li class="nav-item">
                <a href="https://www.suning.com" target="navIframe" class="nav-lk">苏宁商城</a>
            </li>
        </ul>
    </aside>
    <section class="frame-wrap">
        <iframe src="https://www.taobao.com" name="navIframe1"></iframe>
        <iframe src="https://www.tmall.com" name="navIframe2"></iframe>
        <iframe src="https://www.suning.com" name="navIframe3"></iframe>
    </section>
</div>
<script>
// You might want to add some JavaScript here if needed
</script>
</body>
</html>